<template>
     <div>
       <div class="top" >
         <el-header class="width">
           <img src="/static/images/logo.png">
           <div class="user-box">
             <div 
             style="margin-top: 12px;"
             v-if="!userName">
               <a href="/account#register">注册</a>
               <a href="/account#login">登陆</a>
             </div>
             <div v-else>
                 <img 
                  v-popover:popover1
                 class="head" src="/static/a.jpg">
                <!-- <a 
               
                >{{userName}}</a> -->
                  <el-popover
                  class="user-nav"
                    ref="popover1"
                    placement="top-start"
                    :title="userName"
                    width="200"
                    trigger="hover"
                  >
                  <router-link tag='div' to="edit/post">
                  文章管理
                  </router-link>
                  </el-popover>
              </div>
             
              
           </div>
           <div style="float:right">
             <ul class="nav">
               <router-link tag="li" :to="{name:'index'}">首页</router-link>
               <router-link tag="li" :to="{name:'postList'}">所有文章</router-link>         
               <li> 
                 <a href="/rmos">监控系统</a></li>
              <router-link tag="li" :to="{name:'about'}">关于我</router-link>
             </ul>
           </div>
           
         </el-header>
          </div>
         <el-main  class="width" >
            <router-view></router-view>
        </el-main>
     <div class="bottom">
        <el-footer class="statement width">Design by 个人博客  浙ICP备15020594号-x</el-footer>
      </div>    
      </div>  
</template>

<script>
import api from "@/api";
 import { cookie } from "@/utils/";
//  console.log(cookie('PSTM'))
export default {
  name: "App",
  created() {
    //if()
    // console.log('createdcreatedcreated')
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      let token = cookie("token");
      let userName = localStorage.getItem("userName");
      if (token) {
        if (userName) {
          this.userName = userName;
        } else {
          api.getUser().then(res => {
            //  debugger
            this.userName = res.data.data.userName;
            localStorage.setItem("userName", this.userName);
          });
        }
      }
    }
  },
  // components: {
  //   swiper,
  //   swiperSlide
  // },
  data() {
    return {};
  }
};
</script>
<style>
body {
  background: #f1f1f1;
}
</style>
<style scoped>
.head{
  height: 40px;
  width:40px;
  border-radius: 50%;
}
a {
  color: #fff;
  text-decoration: blink;
}

.user-nav a{
 color: #000;
}
.user-box {
  float: right;
  /* height: 40px; */
  /* line-height: 40px; */
  margin-top: 10px;
 
}
img {
  height: 70px;
}
.nav li {
  float: left;
  height: 40px;
  line-height: 40px;
  margin-top: 12px;
  color: #fff;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  cursor: pointer;
}
.width {
  width: 1000px;
  margin: 0 auto;
}
.statement {
  text-align: center;
  line-height: 60px;
  color: #a5a4a4;
}
.top {
  height: 60px;
  /* color: red; */
  background: rgb(15, 16, 17);
  padding-left: 20px;
  padding-right: 20px;
}
.bottom {
  background: rgb(15, 16, 17);
  /* position: absolute; */
  width: 100%;
  bottom: 0;
  z-index: 9999;
}
</style>
